<template>
  <div>
   
    <home-header></home-header>
    <home-swiper :list="swiperList"></home-swiper>
    <home-icons :list="iconList"></home-icons>
    <home-recommend :list="recommendList"></home-recommend>
    <home-weekend :list="weekendList"></home-weekend>
    
  </div>
</template>
 
<script>
import HomeHeader from './components/Header'
import HomeSwiper from './components/Swiper'
import HomeIcons from './components/Icons'
import HomeRecommend from './components/Recommend'
import HomeWeekend from './components/Weekend'
import axios from 'axios'
import { mapState } from 'vuex'


export default {
  name: "Home",
  data() {
    return{
      lastCity:'',
      swiperList:[],
      iconList:[],
      recommendList:[],
      weekendList:[]
    };
  },
  computed:{
    ...mapState(['city'])
  },
  components:{
    'home-header':HomeHeader,
    'home-swiper':HomeSwiper,
    'home-icons':HomeIcons,
    'home-recommend':HomeRecommend,
    'home-weekend':HomeWeekend

  },
  methods: {
    getHomeInfo(){
        axios.get('/api/index.json?city=' + this.city).then(this.getHomeInfoSucc)
    },
    getHomeInfoSucc(res){
      console.log(res.data)
        res = res.data
        console.log(res)
        if(res.ret && res.data){
          const data = res.data
          console.log(data)
          this.swiperList = data.swiperList
          this.iconList = data.iconList
          this.recommendList = data.recommendList
          this.weekendList = data.weekendList
        }
    }
  },
  mounted() {
     this.lastCity = this.city
    // console.log('mounted')
    this.getHomeInfo()
  },
  activated() {
    if(this.lastCity !== this.city) {
      this.lastCity = this.city
      this.getHomeInfo()
    }
   
  }
};
</script>

<style lang="stylus" scoped>
</style>
